<template>
  <view class="padding-lr-30">
    <view class="card padding-30" :style="{marginTop}">
      <view class="flex-row justify-between">
        <view class="flex-row">
          <text class="text-24 color-t1">{{ item.productName }}</text>
        </view>
        <view class="flex-row">
          <text class="text-24 color-t1">产品价格：</text>
          <text class="text-24 color-primary">￥{{ item.price || '-' }}</text>
        </view>
      </view>
      <view class="flex-row justify-between margin-top-20">
        <view class="flex-row">
          <text class="text-24 color-t1">车型：</text>
          <text class="text-24 color-primary">{{ item.brand + item.seatAmount + '座' }}</text>
        </view>
        <view class="flex-row">
          <text class="text-24 color-t1">每超1公里价格：</text>
          <text class="text-24 color-primary">￥{{ item.overMileagePrice || '-' }}</text>
        </view>
      </view>
      <view class="flex-row justify-end margin-top-30">
        <view class="tag">
          <tui-button width="144rpx" height="64rpx" border-radius="8rpx" :size="24" plain type="gray" text="价格日历" @click="productCalendar(item.productId,item.vehicleTypeId, 2)" />
        </view>
        <view class="tag">
          <tui-button width="144rpx" height="64rpx" border-radius="8rpx" :size="24" plain type="gray" text="超公里价格" @click="setOverKilometerPrice(item)" />
        </view>
        <view class="tag">
          <tui-button width="144rpx" height="64rpx" border-radius="8rpx" :size="24" plain type="gray" text="设定价格" @click="setProductPrice(item)" />
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapMutations } from 'vuex'
import { jump } from '@/common/util'
export default {
  name: 'ProductItem',
  props: {
    item: {
      type: Object,
      default: () => {}
    },
    marginTop: {
      type: String,
      default: ''
    }
  },
  methods: {
    // 设置超公里价格
    setOverKilometerPrice(item) {
      this.setSetPriceVehicle(item)
      jump('/vehicle/set-price/set-price?type=overKilometer')
    },
    // 设置产品价格
    setProductPrice(item) {
      this.setSetPriceVehicle(item)
      jump('/vehicle/price-list/price-list')
    },
    // 价格日历
    productCalendar(productId, carTypeId, priceType) {
      jump('/vehicle/calendar/calendar?productId=' + productId + '&carTypeId=' + carTypeId + '&priceType=' + priceType)
    },
    ...mapMutations({
      setSetPriceVehicle: 'vehicle/setSetPriceVehicle'
    })
  }
}
</script>

<style scoped lang="scss">
.card{
  border-radius:20rpx;
}
.tag{
  margin:0 6rpx;
}
</style>
